<template>

	<view class="content">
			<view class="selected-wrap" style="margin-top: 40rpx;">
				<!-- 左侧列表 -->
				<view  id="dis_left"
					style="float: left; width:50%;overflow: hidden;box-sizing: border-box;"
					ref="left" class="leftbxo">
						<view class="selected-list" style="float: left;"   v-for="(item,index) in liftbox" :key="index" >
						
							<view class="selected-img" @click="onPublicJump(item)" >
								<image mode="widthFix" :src="item.url"  ></image>
							
								<view v-if="item.type==5||(item.type==6&&item.href.indexOf('takeLook')!=-1)"    style="position: absolute; top:30rpx;right: 30rpx; z-index: 10;">
										<text class="cuIcon-videofill" style="font-size: 40px;color: #fff;"></text>
								</view>	
							</view>
							
							<view class="selected-illustrate" style="word-break: break-all;" @click="onPublicJump(item)">
								<image v-if="item.type==5" src="https://llkj-wechat.oss-cn-hangzhou.aliyuncs.com/videos.png" style="height: 40rpx;width: 40rpx;vertical-align: sub;margin-right: 10rpx;display: inline-block;" mode=""></image>
								{{item.dynamic_info.content||item.name}}
								
							</view>
							
							<!-- 圈子 -->
							<view class="userinfors" style="display: flex;" v-if="item.type==6">
								<view class="leftinfor" @click="heardeuser(item.dynamic_info)">
							
									<image v-if="item.dynamic_info.uphoto" class="avtarimg" :src="item.dynamic_info.uphoto"></image>
									<image v-else class="avtarimg" src="https://llkj-wechat.oss-cn-hangzhou.aliyuncs.com/images/202306/3ccea7f5e6cb71501684eac670c866fa.jpg"></image>{{item.dynamic_info.usename||'六零家人'}}
							
								</view>
							
								<view class=" rightbox" @click="handleHelp(item.dynamic_info,'left',index)">
									<u-icon name="thumb-up" :color="item.dynamic_info.is_like == 1 ? '#E1265D' : '#b0b0b0'"
										size="22">
									</u-icon>
									
									<text style="padding: 0rpx 0 0 2rpx;" v-if="item.dynamic_info.like_num == 0"></text>
									<text style="padding: 0rpx 0 0 2rpx;" v-else>{{ item.dynamic_info.like_num  }}</text>
								</view>
							
							</view>
							
							
						</view>
					</view>
			
				<!-- 右侧列表 -->
				<view id="dis_right"
					style="float: right; width:50%;overflow:hidden; box-sizing: border-box;"
					ref="right" class="rightbxo">
						<view class="selected-list" style="float: right;"   v-for="(item,index) in rightbox" :key="index">
							<view class="selected-img" @click="onPublicJump(item)">
								<image mode="widthFix" :src="item.url"  ></image>
								<view  v-if="item.type==5||(item.type==6&&item.href.indexOf('takeLook')!=-1)"   style="position: absolute; top:30rpx;right: 30rpx; z-index: 10;">
										<text class="cuIcon-videofill" style="font-size: 40px;color: #fff;"></text>
								</view>	
							</view>
							<view class="selected-illustrate" style="word-break: break-all;" @click="onPublicJump(item)" >
								<image v-if="item.type==5" src="https://llkj-wechat.oss-cn-hangzhou.aliyuncs.com/videos.png" style="height: 40rpx;width: 40rpx;vertical-align: sub;margin-right: 10rpx;display: inline-block;" mode=""></image>
								{{item.dynamic_info.content||item.name}}
							</view>
							
							<!-- 圈子 -->
							<view class="userinfors" style="display: flex;" v-if="item.type==6">
								<view class="leftinfor" @click="heardeuser(item.dynamic_info)">
							
									<image v-if="item.dynamic_info.uphoto" class="avtarimg" :src="item.dynamic_info.uphoto"></image>
									<image v-else class="avtarimg" src="https://llkj-wechat.oss-cn-hangzhou.aliyuncs.com/images/202306/3ccea7f5e6cb71501684eac670c866fa.jpg"></image>{{item.dynamic_info.usename||'六零家人'}}
							
								</view>
							
								<view class=" rightbox" @click="handleHelp(item.dynamic_info,'right',index)">
									<u-icon name="thumb-up" :color="item.dynamic_info.is_like == 1 ? '#E1265D' : '#b0b0b0'"
										size="22">
									</u-icon>
									
									<text style="padding: 0rpx 0 0 2rpx;" v-if="item.dynamic_info.like_num == 0"></text>
									<text style="padding: 0rpx 0 0 2rpx;" v-else>{{ item.dynamic_info.like_num  }}</text>
								</view>
							
							</view>
						</view>
					</view>
		
			</view>
		
		<!-- end -->
		
	
	</view>
</template>

<script>
	let query, leftHeight = 0,
		rightHeight = 0
	import {getScene} from "@/plugins/utils.js" 
	
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		loGetLocation
	} from '@/config/common';
	export default {
	
		computed: {
			...mapState(['PrimaryColor', `userInfo`]),
			freeSpecsButtonBackground() {
				return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75)
			},
		},
		props:{
			list: {
			  type: Array,
			  default: () => {
			    return []
			  }
			}
		},
		data() {
			return {
				liftbox: [],
				rightbox: [],
				
			}
		},
		watch: {
			// //数据改变请求接口
			userInfo: {
				handler: function() {
					
					}
				},
				deep: true
			},
		

		
		

		 mounted(e) {
		
			this.getAdlist()
			
		},
	
	

		methods: {
			// 点赞
			async handleHelp(item,type,index) {
			wx.vibrateShort();
				let left = JSON.parse(JSON.stringify(this.liftbox))
				let right = JSON.parse(JSON.stringify(this.rightbox))
				if (!this.userInfo.token) {
					this.judgeLogin(() => {});
					return false;
				} else {
					let params = {
						dynamic_id: item.dynamic_id,
					}
					await this.$circleApi.help(params).then(res => {
						if (item.is_like == 0) {
							uni.$u.toast('点赞成功')
							if(type=='left'){
								left[index].dynamic_info.like_num+=1
								left[index].dynamic_info.is_like=1
								this.liftbox = JSON.parse(JSON.stringify(left))
							}else{
								right[index].dynamic_info.like_num+=1
								right[index].dynamic_info.is_like=1
								this.rightbox = JSON.parse(JSON.stringify(right))
							}
							
						} else {
							uni.$u.toast('取消点赞')
							if(type=='left'){
								left[index].dynamic_info.like_num-=1
								left[index].dynamic_info.is_like=0
								this.liftbox = JSON.parse(JSON.stringify(left))
							}else{
								right[index].dynamic_info.like_num-=1
								right[index].dynamic_info.is_like=0
								this.rightbox = JSON.parse(JSON.stringify(right))
							}
						
						}
					})
			
				}
				
			},
			heardeuser(item) {
				wx.vibrateShort();
				if (!this.userInfo.token) {
					this.judgeLogin(() => {});
					return false;
				} else {
					if (item.uid == this.userInfo.id) {
			
						uni.navigateTo({
							url: `/pagesCircle/mycircleinfo/mycircleinfo?id=${item.uid}`
						})
					} else {
						uni.navigateTo({
							url: `/pagesCircle/Userdetails/Userdetails?id=${item.uid}`
						})
					}
			
				}
			},
		onPublicJump(item){
			wx.vibrateShort();
			// 视频号视频
			if(item.type==5){
				this.getVideo(item)
			}else{
				this.adJump(item)
			}
		},
		// 视频号视频
		getVideo(item){
			wx.openChannelsActivity(
			{
				finderUserName:item.appid,
				feedId:item.href
			}
			)
		},
		
			// 首页广告列表
		async getAdlist(){
			let mydata =this.list
				for (let item in mydata) {
					// 判断两边的高度
					// leftHeight <= rightHeight ? this.liftbox.push(mydata[item]) : this.rightbox.push(mydata[item]);
					await this.arrPush(mydata[item])
					await this.getBoxHeight(this.liftbox, this.rightbox);
				}
			},
			arrPush(item){
					leftHeight <= rightHeight ? this.liftbox.push(item) : this.rightbox.push(item);
			},
			getBoxHeight(leftList, rightList) {
				
				query = uni.createSelectorQuery().in(this);
				return new Promise((resolve, reject) => {
					this.$data.liftList = leftList
					this.$data.rightList = rightList
					query.select('#dis_left').boundingClientRect();
					query.select('#dis_right').boundingClientRect();
					// 处理异步问题，没有数据
					setTimeout(() => {
						query.exec((res) => {
							
							leftHeight = res[0].height; //获取左边列表的高度
							rightHeight = res[1].height; //获取右边列表的高度
							resolve();
						},10);
					})
				})
			},
	
			
	
			// 跳转
			adJump(item){
				
				
				
				if (this.userInfo.token) {
					// 小程序跳转
					if (item.href && item.type == 3) {
						this.onAdJump(item)
					}
					
					// 跳转H5
					if (item.href && item.type == 2) {
						this.onJump('/pages/webview/webview?url=' + encodeURI('' + item.href))
					}
					if (item.href && item.type == 6) {
						this.onAdJump(item)
					}
					// 跳转视频
					if (item.href && item.type == 1) {
						this.videoLook(item.href)
					}
				} else {
					this.judgePhone()
				}
			},
			videoLook(url){
				let src = Array.isArray(url)? url[0]:url;
				uni.$u.route('/pagesCircle/video/look', 
				  {src:src},
				);
			},
			// 产品跳转
			onProductJump(item){
			
				if(item.product_type == 52){
				//旅居
				this.onJump('/pagesPro/detail/lvjuDetail?id='+ item.id)
				}
				if(item.product_type == 50){
				//线路
				this.onJump('/pagesPro/detail/lineDetail?id=' + item.id)
				}
				if(item.product_type == 51){
				//基地
				this.onJump('/pagesPro/detail/baseDetail?id=' + item.id)
				}
				
			},
			onJumpmore(url){
				wx.vibrateShort();
				uni.switchTab({
					url:url
				})
			},
			onAdJump(obj){
				wx.vibrateShort();
				// 跳转h5
			
				if((obj.type==3&&!obj.appid&&obj.href)||(obj.type==6&&!obj.appid&&obj.href)){
					// 跳转小程序内部
					uni.navigateTo({
						url: obj.href,
						fail: function(res) {
							
						    uni.reLaunch({
						    	url:obj.href
						    })
						  }
					})
				}
				
				// 外部小程序跳转
				if(obj.type==3&&obj.appid&&obj.href){
					// 跳转小程序内部
					uni.navigateToMiniProgram({
					    appId:obj.appid,
					    path:obj.href,
					    envVersion:"release",
					    success: res => {
					      // 打开成功
					   
					    },
					    fail: err => {
					    
					    }
					});
				}
				
			},
		
	
		},
		

	}
</script>

<style lang="scss" scoped>
	//旅居出行右侧黄色箭头
	.lvju-right-yellow {
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		background-color: #ff9800;
		border-radius: 15rpx;
		text-align: center;
	}

	.scroll-box {
		display: inline-block;
		position: relative;
		// margin-right: 30rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.bianju {
		margin: 0 30rpx;

	}

	.swiper-baner {
		position: relative;

		.baner-search {
			position: absolute;
			top: 30%;
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;

		}
	}
	
	.small-baner{
		position: relative;
		// height: 250rpx;
		padding:0 32rpx;
		margin-bottom: 25rpx;
		border-radius: 8rpx;
		overflow: hidden;
		.baner-search {
			position: absolute;
			top: 30%;
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
		
		}
	}
.hotimg{
	position: absolute;
	    height: 40rpx;
		border-radius: 20rpx;
		line-height: 40rpx;
	   padding: 0 10rpx;
	   font-size: 24rpx;
	    top: -5px;
	    right: -20px;
	    z-index: 99999;
		background-color: #ba5739;
		color: #ffffff;
		animation: shake .5s infinite;
}
	@keyframes shake {
	
	  10% { 
	
		transform: rotate(10deg);}
	
	  30% { 
	
		transform: rotate(-5deg);
	   }
	
	  50% { 
	  transform: rotate(3deg);
	  }
	 
	 
	  80% { 
	  transform: rotate(-2deg);
	   }
	  90% { 
	   transform: rotate(-1deg);
	  }
	  100% { 
	  transform: rotate(0deg);
	   }
	}
	// 服务
	.fuwu {
		padding: 0 30rpx;
		margin-bottom: 25rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.fuwu-div {
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
		}

		&-title {
			margin-top: 12rpx;
			font-size: 34rpx;
		}

		.fuwuImg {
			width: 100rpx;
			height: 100rpx;
			// border-radius: 50rpx;
		}

		.fuwu-title {
			font-size: 30rpx;
		}
	}


	.lv {
		display: flex;
		justify-content: space-between;

		// padding:  0 25rpx;
		.lv-l {
			width: 338rpx;
			border: 2rpx solid #D8D8D8;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background: #ffffff;

			.lv-l-title {
				font-size: 48rpx;

				// margin-top: 20rpx;

				margin-bottom: 10rpx;
			}

			.lv-l-dectip {
				background: #ffffff;
				border-radius: 20rpx;
				font-size: 32rpx;
				margin-bottom: 40rpx;
				color: #767676;
			}
		}

		.lv-r {
			.lv-con {
				border-radius: 20rpx;
				background: #ffffff;
				width: 334rpx;
				border: 2rpx solid #D8D8D8;
				padding: 30rpx;
				box-sizing: border-box;

				// display: flex;
				// justify-content: space-between;
				.con {
					flex-grow: 1;
				}

				.con-title {
					font-size: 48rpx;
					font-weight: 500;
				}

				.con-dectip {
					color: #767676;
					margin-top: 0rpx;
					font-size: 28rpx;
				}
			}
		}

	}

	.ka {
		border-radius: 20rpx;
		margin-top: 20rpx;
		border: 2rpx solid #D8D8D8;
		padding: 25rpx;
		background: #ffffff;

		.ka-title {

			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10rpx;

			.ka-title-l {
				font-size: 40rpx;

			}

			.ka-title-r {
				font-size: 28rpx;
				color: #767676;

			}
		}

		.tag {
			display: flex;
			margin: 10rpx 0;

			view {
				border: 2rpx solid #ba5739;
				font-size: 32rpx;
				margin-right: 20rpx;
				color: #ba5739;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
			}
		}

		.ka-price {
			.curren-price {
				color: #ba5739;
				font-size: 48rpx;
				font-weight: bold;
				padding-right: 20rpx;

			}

			.out-price {
				color: #999999;
				font-size: 36rpx;
				text-decoration: line-through;
				font-style: italic;
			}

			.kay-buy {
				width: 200rpx;
				height: 68rpx;
				color: #fff;
				background-color: #ba5739;
				border-radius: 34rpx;
				text-align: center;
				line-height: 68rpx;
				font-size: 36rpx;
			}
		}
	}

	.xing {
		.xing-title {
			text-align: left;
			font-size: 48rpx;
			font-weight: bold;
			padding: 40rpx 0;
		}

		.xin-wrap {
			width: 100%;
			// border: 1rpx solid #D8D8D8;

		}

		.swiper {
			height: 430rpx;
			margin: 0;
			padding: 0;
		}

		.swiper-item {
			display: flex;
			align-items: flex-start;

			// border: 1rpx solid #D8D8D8;
			.xin-ren {
				width: 400rpx;
				height: 530rpx;
				margin-right: 20rpx;
				text-align: center;
				overflow: hidden;

				.xing-img image {
					display: flex;
					width: 400rpx;
					height: 530rpx;
					// border: 2rpx solid #D8D8D8;
					border-radius: 8rpx;
					// filter: blur(15px);
					// filter:grayscale(10%);
					// filter: opacity(50%);
					
				}
				.xing-img .mengban{
					width: 400rpx;
					height: 530rpx;
					position: absolute;
					top: 0;
					left: 0;
					background-color: darkblue;
					filter: blur(15px);
				}
			
				.xing-name {
					position: absolute;
					bottom: 40rpx;
					font-size: 36rpx;
					color: #555;
					margin: 20rpx 0;
					text-align: left;
				}

				.xing-dec {
					font-size: 28rpx;
					color: #767676;
				}
			}


		}

	}

	.scroll-box:last-child .xin-ren:last-child {
		margin-right: 0;
	}

	.hot {
		.hot-tab {
			margin: 20px 0 100rpx 0;
			display: flex;
			justify-content: center;
			font-size: 36rpx;
			font-weight: bold;
			align-items: center;

			view {
				margin: 0 20rpx;

			}

			.active {
				color: #ba5739;
				font-size: 48rpx;
			}
		}

		.hot-content {
			// border: 2rpx solid #D8D8D8;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			padding-bottom: 10rpx;
		}

		.hot-img {
			position: relative;

			image {
				width: 100%;
				height: 324rpx;
			}

			.hot-img-rl {
				position: absolute;
				bottom: 0;
				display: flex;
				justify-content: flex-end;
				color: #fff;
				width: 100%;
				padding-right: 20rpx;
				padding-bottom: 10rpx;
				align-items: center;
				font-size: 28rpx;
				padding: 10px;
				background-color: rgba(0, 0, 0, 0.3);
			}
		}

		.hot-title {
			font-size: 40rpx;
			font-weight: bold;
			padding-top: 20rpx;
			margin: 20rpx 0 20rpx 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			/*超出几行后省略号*/
			overflow: hidden;

		}

		.tag {
			display: flex;
			flex-wrap: wrap;
			padding-left: 20rpx;

			view {
				border: 2rpx solid #ba5739;
				font-size: 30rpx;
				margin-right: 20rpx;
				color: #ba5739;
				padding: 4rpx 8rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
			}
		}
	}

	.giftBagBox {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;

		.giftBag {
			width: 600rpx;
			height: 800rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.icoBox {
				position: relative;
				right: -300rpx;
				top: 0;
			}

			.img {
				width: 100%;

			}

			.btn {
				width: 80%;
				height: 80rpx;
				border: 4rpx solid yellow;
				border-radius: 35rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 32rpx;
				color: #fff;
				margin-top: 50rpx;
			}
		}

		.activity {
			width: 694rpx;
			height: 768rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.btnBjBox {
				position: absolute;
				bottom: 120rpx;
				width: 300rpx;
				height: 80rpx;
				background-color: #f3ec88;
				color: #ff9800;
				border: 4rpx solid #ff9800;
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 600;
				box-shadow: 2rpx 2rpx 3rpx #ebebeb;
			}

			.closeBox {
				position: absolute;
				bottom: -110rpx;


			}
		}
	}
	.addclass{
		position: fixed;
		
		right: 20px;
		height: 60rpx;
		border-radius: 30rpx;
		line-height: 60rpx;
		padding-right: 90rpx;
		padding-left: 20rpx;
		color: #fff;
		z-index: 999999;
		background-color:#ba5739;
	}
.tuxing{
	width: 100vw;
	position: fixed;
	height: 20rpx;
	top: 0;
	left: 0;
}
	.addclass .close-btn{
		position: absolute;
		height: 50rpx !important;
		width: 50rpx !important;
		right: 5rpx;
		top: 5rpx;
		
	}
	.addclass span{
		position: absolute;
		top: -16rpx;
		
		   width: 0;
		    height: 0;
		    border-bottom: 20rpx solid #ba5739;
		    border-right: 20rpx solid transparent;
		    border-left: 20rpx solid transparent;
	}
	
	
	// 精选部分样式
	.selected{
		// padding-bottom:120rpx;
		overflow: hidden;
	}
	.selected-title{
		text-align: center;
		color: #000;
		font-size: 44rpx;
		font-weight: 800;
		height: 120rpx;
		line-height:120rpx;
	}
	.selected-text{
		    color: #a3a3a3;
		    font-size: 17px;
			text-align: center;
		   
	}
	.selected-wrap{
		
		margin-bottom: 30rpx;
		overflow: hidden;
	}
	.selected-list{
		width: 345rpx;
		
		// margin-right: 20rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.selected-img{
	position: relative;
		
		width: 100%;
		
	}
	.selected-illustrate{
		// line-height: 50rpx;
		margin: 20rpx 0;
		font-size: 32rpx;
		color: #000;
		font-weight: bold;
		padding:0 20rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	
	
	.userinfors {
		height: 80rpx;
		padding: 0 20rpx;
	}
	
	.leftinfor {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical !important;
	}
	
	.avtarimg {
		height: 60rpx;
		width: 60rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	
	.rightbox {
		display: flex;
		height: 60rpx;
		line-height: 60rpx;
	}
</style>